<template>
  <div style="height: 400px;background-color: red">
    <div class="infinite-list-wrapper" style="height: 400px">
      <ul
        class="list"
        v-infinite-scroll="load"
        infinite-scroll-distance="50"
        :infinite-scroll-immediate="false"
        infinite-scroll-disabled="disabled">
        <li v-for="i in count" class="list-item">{{ i }}</li>
      </ul>
      <p v-if="loading">加载中...</p>
      <p v-if="noMore">没有更多了</p>
    </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                count: 5,
                loading: false
            }
        },
        computed: {
            noMore() {
                return this.count >= 200
            },
            disabled() {
                return this.loading || this.noMore
            }
        },
        methods: {
            load() {
                this.loading = true
                setTimeout(() => {
                    this.count += 2
                    this.loading = false
                }, 50)
            }
        }
    }
</script>
